<template>
   
    <el-form  :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item  class="logi" prop="pass">
        <el-input type="text" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入用户名" ></el-input>
      </el-form-item>
      <el-form-item  class="logi" prop="checkPass" >
        <el-input type="password" v-model="ruleForm.checkPass"  autocomplete="off"  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item class="logi">
        <el-button type="primary"  class="qaz"  @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
   
                       
  </template>
  
  <script >                    
  import {login} from '@/api/index'
  export default {
      data() {
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入用户名'));
          } else {
            if (this.ruleForm.checkPass !== '') {
              this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
          }
        };
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            callback();
          }
        };
        return {
          ruleForm: {
            pass: '',
            checkPass: '',
          },
          rules: {
            pass: [
              { validator: validatePass, trigger: 'blur' }
            ],
            checkPass: [
              { validator: validatePass2, trigger: 'blur' }
            ],
            
          }
        };
      },
      methods: {
      async  submitForm(formName) {
          this.$refs[formName].validate(async(valid) => {
            if (valid) {
             let res = await login({ username:this.ruleForm.pass,
                password:this.ruleForm.checkPass})
                 if(res.data.msg=='ok'){
                  this.$router.push('/index/index')
                  this.$store.commit('settoken', res.data.data.token)
                  this.$store.commit('settree', res.data.data.tree)
                 }
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    }
  </script>
  <style >
  .el-input{
    width: 200px !important;
  }
  .el-form-item__content{
    flex: 0 !important;
    min-width: 200px !important;
  }
  .logi{
    justify-content: center !important;
  }
  .qaz{
    width: 200px !important;
    background: teal !important;
    border-color: teal !important;
  }
  </style>
  